<template>
  <div :id="chartId" :style="{width, height}" class="my-chart" />
</template>
<script>
import echarts from 'echarts'
import { toolboxPie } from '@/components/MyCharts/toolbox'
import resize from '@/views/dashboard/admin/components/mixins/resize'
export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    pieData: {
      type: Array,
      default: () => {
        return []
      }
    },
    chartId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    valTitle: {
      type: String,
      default: ''
    },
    cateTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    pieData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.chartId))

      this.setOptions(this.pieData)
    },
    setOptions(data) {
      this.chart.setOption({
        color: ['#3CA0F6', '#3B71E8'],
        title: {
          text: this.title,
          left: 'center',
          padding: 8
        },
        toolbox: toolboxPie(this.valTitle),
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const str = `${params.name}<br />${params.value}万元(${params.percent}%)`
            return str
          }
        },
        series: [
          {
            name: this.cateTitle,
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.my-chart {
  /deep/ .charts-table {
    width: 100%;
    border: 1px solid #dfe6ec;
    text-align: center;
    border-collapse: collapse;
    >thead{
      >tr{
        >th{
          height: 40px;
          background: #F0F2F5;
          border-right: 1px solid #cecece;
          border-bottom: 1px solid #dfe6ec;
          &:last-child {
            border-right: none;
          }
        }
      }
    }
    >tbody {
      >tr{
        >td{
          height: 40px;
          border-right: 1px solid #cecece;
          border-bottom: 1px solid #dfe6ec;
          &:last-child {
            border-right: none;
          }
        }
        &:last-child {
          >td {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
